
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import HomeDetail from './homeDetail';
import TopView from './TopView';
import HomeMiddleView from './HomeMiddleView';
import MiddleBottomView from './MiddleBottomView';
import ShopCenter from './ShopCenter';
import ShopDetailView from './ShopDetailView';
import GuessYouLike from './GuessYouLike';
var Dimensions = require('Dimensions');
var {height,width} = Dimensions.get('window');
export default class Home extends Component {
  _pressButton(){
    const {navigator} = this.props;
    if(navigator){
      navigator.push({
        name:'详情页面',
        component:HomeDetail
      });
    }
  }
  pushToShopCenterDetail(url){
    //console.log('pushToShopCenterDetail',url);
    const {navigator} = this.props;
    if(navigator){
      navigator.push({
        name:'ShopDetailView',
        component:ShopDetailView,
        params:{'url':this.dealWithUrl(url)}
      });
    }
    //alert(url);
  }
  dealWithUrl(url){
    return url.replace('imeituan://www.meituan.com/web/?url=','');
  }
  render() {
    return (
      <View style={styles.container}>
        {this.renderNavBar()}
        <ScrollView>
          <TopView/>
          <HomeMiddleView/>
          <MiddleBottomView/>
          <ShopCenter popToHomeView={(url)=>this.pushToShopCenterDetail(url)}/>
          <GuessYouLike />
        </ScrollView>
      </View>
    );
  }
  renderNavBar(){
    return(
      <View style={styles.navBarStyle}>
        <TouchableOpacity onPress={()=>{alert('点击了兰州')}}>
          <Text style={{color:'white'}}>兰州</Text>
        </TouchableOpacity>
        <TextInput
          placeholder='输入商家，品类，商圈'
          style={styles.topInputStyle}
          underlineColorAndroid="transparent"
        />
        <View style={{flexDirection:'row'}}>
          <View style={styles.rightNavViewStyle}>
            <TouchableOpacity onPress={()=>{alert('点击了铃铛')}}>
              <Image source={{uri:'icon_homepage_message'}} style={styles.nvaRightImgStyle}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=>{alert('点击了扫码')}}>
              <Image source={{uri:'icon_homepage_scan'}} style={styles.nvaRightImgStyle}/>
            </TouchableOpacity>
          </View>
          
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  rightNavViewStyle:{
    flexDirection:'row',
    alignItems:'center',
  },
  topInputStyle:{
    padding:0,
    paddingLeft:10,
    width:width*0.7,
    height:30,
    backgroundColor:'white',
    borderRadius:18,
  },
  navBarStyle:{
    height:Platform.OS === 'ios'?64:44,
    backgroundColor:'rgba(255,96,0,1)',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
  },
  nvaRightImgStyle:{
    width:Platform.OS === 'ios'?28:24,
    height:Platform.OS === 'ios'?28:24,
  }
});
